<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="me-view-card">
          <el-card shadow="hover">
            <el-button
              v-if="canEdit"
              style="position: absolute;left: 60%;"
              size="mini"
              round
              icon="el-icon-edit">
              <router-link :to="'/blog/edit/' + article.id" target="_blank" class="inlineBlock">
                编辑
              </router-link>
            </el-button>

            <div class="originalImg"/>
            <h1 class="me-view-title">{{ article.title }}</h1>
            <el-divider content-position="right">
              <div class="me-view-meta">
                <span style="margin-right: 3px">{{ article.publishTime }}</span>
                <span style="margin-right: 3px">阅读{{ article.viewCount?article.viewCount:'N' }}</span>
                <span style="margin-right: 3px">评论{{ article.commentCount?article.commentCount:'N' }}</span>
                <span style="margin-right: 3px">获赞{{ article.likeCount?article.likeCount:'N' }}</span>
              </div>
            </el-divider>
            <div class="me-view-content">
              <markdown-viewer v-model="article.content"/>
            </div>

            <div class="praise-box">
              <!--              <el-button @click="follow" style="font-size: 50px" :type="button.type" :icon="button.icon" circle></el-button>-->
            </div>
          </el-card>
          <div class="me-view-end">
            <el-alert
              :closable="false"
              title="The End"
              type="success"
              center/>
          </div>

          <div class="me-view-tag">
            标签：
            <el-tag v-for="item in article.tags" :key="item.value" :type="tagColor[Math.floor((Math.random()*tagColor.length))]" class="me-view-tag-item">
              {{ item.name }}
            </el-tag>
          </div>

          <div class="me-view-tag">
            文章分类：
            <!--<span style="font-weight: 600">{{article.category.categoryName}}</span>-->
            <el-button v-for="item in article.channels" :key="item.value" size="mini" type="primary" round plain>
              {{ item.name }}
            </el-button>
          </div>
          <comment :belong-id="articleId"/>
        </div>
      </el-col>
      <el-col :span="6">
        <el-row>
          <div class="author_info">
            <div class="me-view-author">
              <a class="img_con">
                <img :src="avatar" class="me-view-picture" alt="wu">
              </a>
              <span style="margin-left: 20px">{{ article.nickName }}</span>
              <div class="data-box">
                <div class="article-box">
                  <div style="margin-bottom: 8px;">阅读量
                    <div>{{ article.viewCount?article.viewCount:'N' }}</div>
                  </div>
                </div>
                <div class="article-box">
                  <div style="margin-bottom: 8px;">获赞数
                    <div>{{ article.likeCount?article.likeCount:'N' }}</div>
                  </div>
                </div>
                <div class="article-box">
                  <div style="margin-bottom: 8px;">收藏量
                    <div>{{ article.collectCount?article.collectCount:'N' }}</div>
                  </div>
                </div>
                <el-button style="margin-top: 16px;text-align: center;" type="primary" round @click="aboutAuthor">点击此处，查看作者详情</el-button>
              </div>
            </div>
          </div>
        </el-row>
        <el-row>
          <div v-for="otherBlog in otherArticles" :key="otherBlog.id">
            <el-divider/>
            <el-link :underline="false">
              <router-link :to="'/blog/details/' + otherBlog.id" target="_blank">
                <div style="margin-left: 3px;margin-bottom: 5px" class="el-icon-notebook-2">  {{ otherBlog.title }}</div>
                <div style="margin-left: 3px" class="el-icon-timer">  {{ otherBlog.publishTime }}</div>
              </router-link>
            </el-link>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <el-backtop :bottom="100">
      <div
        style="{transform: rotate(-45deg);
          -webkit-transform: rotate(-45deg); /* Chrome and Safari */
          -moz-transform: rotate(-45deg); /* Firefox */
          height: 100%;
          width: 100%;
          text-align: center;
          line-height: 40px;}">🚀
      </div>
    </el-backtop>
  </div>
</template>
<script>

import default_avatar from '@/assets/404_images/404.png'
import MarkdownViewer from '@/components/MarkdownViewer'
import Comment from '@/components/Comment'

import articleApi from '@/api/cms/article'

export default {
  name: 'Details',
  components: { MarkdownViewer, Comment },

  data() {
    return {
      article: {
        avatar: '',
        title: '',
        content: '',
        nickName: '',
        publishTime: '',
        tags: [],
        channels: [],
        viewCount: 0,
        likeCount: 0,
        collectCount: 0,
        commentCount: 0
      },
      otherArticles: [
        {
          title: '',
          publishTime: ''
        }
      ],
      articleId: '',
      tagColor: ['success', 'info', 'warning', 'danger', ''],
      canEdit: false,
      articlePageRequest: {
        page: 1,
        limit: 10,
        status: 1,
        userID: null
      }

    }
  },
  computed: {
    avatar() {
      if (this.article.avatar) {
        return this.article.avatar
      }
      return default_avatar
    }
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      const id = this.$route.params.id
      this.articleId = this.$route.params.id
      this.getArticleInfo(id)
      this.getAllArticles()
    } else {
      this.$router.push({ path: '/404' })
    }
  },

  methods: {

    getArticleInfo(id) {
      articleApi.getArticleInfo(id).then(res => {
        this.article = res.result
        this.articlePageRequest.userID = this.article.userId
        if (this.article.userId === this.$store.state.user.id) {
          this.canEdit = true
        }
      }).catch(error => {
        console.log(error)
        this.$router.push({ path: '/404' })
      })
    },
    getAllArticles() {
      articleApi.getAllArticles(this.articlePageRequest).then(res => {
        console.log(res.result)
        this.otherArticles = res.result.items
      })
    },
    aboutAuthor() {
      this.$message('敬请期待~')
    },
    editArticle() {
      this.$message('敬请期待~')
    }

  }
}
</script>

<style>
.toastui-editor-contents {
  font-size: medium;
}
.me-view-body {
  margin: 100px auto 140px;
}

.me-view-container {
  width: 800px;
}

.el-main {
  overflow: hidden;
}

.me-view-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.3;
}

.me-view-author {
  /*margin: 30px 0;*/
  margin-top: 30px;
  vertical-align: middle;
}

.me-view-picture {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 50%;
  vertical-align: middle;
  background-color: #5fb878;
}

.me-view-info {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

.me-view-meta {
  font-size: 12px;
  color: #969696;
}

.me-view-end {
  margin-top: 20px;
}

.me-view-tag {
  margin-top: 20px;
  padding-left: 6px;
  border-left: 4px solid #c5cac3;
}

.me-view-tag-item {
  margin: 0 4px;
}

.me-view-comment {
  margin-top: 60px;
}

.me-view-comment-title {
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.me-view-comment-write {
  margin-top: 20px;
}

.me-view-comment-text {
  font-size: 16px;
}

.v-show-content {
  padding: 8px 25px 15px 30px !important;
}

.v-note-wrapper .v-note-panel {
  box-shadow: none !important;
}

.v-note-wrapper .v-note-panel .v-note-show .v-show-content, .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
  background: #fff !important;
}

.originalImg {
  background: url('https://static3.sycdn.imooc.com/static/img/article/original.png?t=2');
  background-position: 0 0;
  background-size: 64px;
  width: 64px;
  height: 64px;
  position: absolute;
  left: 10px;
  top: 0;
}

.author_info {
  height: 232px;
  background: rgba(43, 51, 59, .06);
  border-radius: 12px;
  box-sizing: border-box;
  padding: 20px 0 20px 20px;
}

.img_con {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}

.data-box {
  width: 220px;
  height: 43px;
  margin: 0 auto 32px;
  text-align: center;
}

.article-box {
  margin-right: 24px;
  float: left;
}

.praise-box{
  position: relative;
  width: 100%;
  margin: 48px 0 0 0;
  text-align: center;
}
</style>
